<!--数据生成页面左侧：数据库表名列表-->
<template>
  <div>
    <div v-on:contextmenu.prevent="handleShow($event)"
         style="height: calc(100vh - 200px); overflow: auto">
      <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText">
      </el-input>
      <el-tree
          ref="tree"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :highlight-current="true"
          @node-click="handleNodeClick"
          @node-contextmenu="handleContextMenu">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon"> </i> {{ node.label }}
            </span>
          </span>
      </el-tree>
    </div>
    <v-contextmenu ref="contextmenu">
      <!--右键-->
      <v-contextmenu-item v-if="isTableClick" @click="addDataGenTab(currentRightClickNodeData)">数据生成
      </v-contextmenu-item>
      <v-contextmenu-item @click="renderTable">刷新列表</v-contextmenu-item>
    </v-contextmenu>
  </div>
</template>

<script>

import {listTable} from "@/api/data-generate/TableTree";

export default {
  name: "TableTree",
  props: {
    addDataGenTab: Function,
    connectionItem: Object,
  },
  components: {},
  data() {
    return {
      //过滤关键词
      filterText: '',
      //树列表
      treeData: [],
      //树结构
      defaultProps: {
        children: 'children',
        label: 'tableName',
        icon: 'icon'
      },
      //加载遮罩
      loading: true,
      //右键单击菜单
      isTableClick: false,
      //右键点击菜单选中表节点数据
      currentRightClickNodeData: null,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.renderTable();
  },
  methods: {
    //表名过滤查询
    filterNode(value, data) {
      if (!value) return true;
      return data.tableName.indexOf(value) !== -1;
    },

    //刷新列表
    renderTable() {
      this.loading = true;
      const param = {connectionId: this.connectionItem.connectionId}
      listTable(param).then(res => {
        this.treeData = res.data;
        this.loading = false;
      })

    },

    //树节点左键点击
    handleNodeClick(data) {
      //TODO 添加对话框或者抽屉展示表结构，以及预览前100条数据
      console.log(data.connectionId)
      console.log(data.tableName)
    },

    //树节点右键点击
    handleContextMenu(event, data, node) {
      const postition = {
        top: event.clientY + 20,
        left: event.clientX + 20,
      }
      this.isTableClick = true;
      this.currentRightClickNodeData = data;
      this.$refs.contextmenu.show(postition);

    },
    handleShow(event) {
      // 获取节点距离浏览器视口的高度
      var top = event.clientY;
      // 获取节点距离浏览器视口的宽度
      var left = event.clientX;
      const postition = {
        top: top + 20,
        left: left + 20,
      }
      //右键点击
      this.isTableClick = false;
      this.currentRightClickNodeData = null;
      this.$refs.contextmenu.show(postition);
    },


  },
}
</script>

<style>
.v-contextmenu--default .v-contextmenu-item--hover {
  background-color: #2c3e50 !important;
}

.v-contextmenu {
  width: 100px !important;
  text-align: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.v-contextmenu .v-contextmenu-item {
  line-height: 2 !important;
}

.el-loading-mask {
  height: calc(100vh - 145px)
}

.manage .el-tree-node {
  color: #000000;
}
</style>